<template>
	<div class="basis navFlex">
		<div class="right bfff left-bumen">
			<div>
				<div
					class="c666 f14 hover title-left title"
					:class="{ ctheme: item.title == navIndex }"
					v-for="(item, i) in nav"
					@click="onNav(item, i)"
				>
					<div>
						{{ item.title }}
					</div>
				</div>
			</div>
		</div>
		<div class="nav-dis" @click="drawer = true">配置</div>
		<el-drawer v-model="drawer" size="40%" :with-header="false">
			<div class="title">
				<div
					class="c666 f14 hover title-left title"
					:class="{ ctheme: item.title == navIndex }"
					v-for="(item, i) in nav"
					@click="onNav(item, i)"
				>
					<div>
						{{ item.title }}
					</div>
				</div>
			</div>
		</el-drawer>
		<div class="left flex">
			<router-view></router-view>
		</div>
	</div>
</template>

<script setup>
import { useMenuStore } from "/store/menu"
const menu = useMenuStore().getMenu()
const nav = ref([])
const navIndex = ref("")
const route = useRoute()
const router = useRouter()
const drawer = ref(false)

async function created() {
	menu.then(result => {
		nav.value = []
		console.log(result)
		result.forEach(item => {
			if (item.title == "应用中心") {
				item.children.forEach(it => {
					if (it.title == "通用模块") {
						nav.value = it.children
					}
				})
			}
			nav.value.forEach(item => {
				if (item.path == route.path) {
					navIndex.value = item.title
				}
			})
		})
	})
}
created()

const onNav = (val, index) => {
	router.push(`${val.path}`)
	navIndex.value = val.title
}
watch(
	route,
	() => {
		nav.value.forEach(item => {
			if (item.path == route.path) {
				navIndex.value = item.title
			}
		})
	},
	{ deep: true, immediate: true }
)
</script>

<style lang="scss" scoped>
@import "/style/basis";
.navFlex {
	position: relative;
	display: flex;
	height: 100%;
	.nav-dis {
		width: 30px;
		padding: 10px;
		text-align: center;
		background-color: #2972fa;
		color: #fff;
		display: none;
		position: fixed;
		top: 200px;
		left: 0;
		z-index: 999;
		border-radius: 3px;
		@include maxWidth(768) {
			display: block;
		}
	}
	.left-bumen {
		width: 250px;
		height: 100%;
		@include maxWidth(1400) {
			width: 220px;
		}
		@include maxWidth(1024) {
			width: 200px;
		}
		@include maxWidth(900) {
			width: 170px;
		}

		.bgc {
			background-color: #f0f5ff;
		}
		@include maxWidth(768) {
			display: none;
		}
	}
}
.title {
	padding-left: 20px;
	padding-block: 10px;
}
</style>
